<template>
<Row>
    <Card class="mb10">
        <p slot="title">本页技术点</p>
        <Alert type="success" show-icon>
            <template slot="desc">
                <p>两个表格联动，分数小于60显示为红色，列数不确定由后台数据决定，列合并，行合并，某列样式</p>
            </template>
        </Alert>
    </Card>
    <Card>
        <p slot="title">七、班级成绩统计表</p>
        <div class="twoTable">
            <div class="scrollChild" :style="styles">
                <Table :columns="columns" :data="data" border></Table>
                <Table :columns="columns2" :data="data2" border class="hideHeader"></Table>
            </div>
        </div>
    </Card>
</Row>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            data: [],
            data2: [],
            columns: [{
                    type: 'index',
                    title: '序号',
                    align: 'center',
                    width: 80,
                },
                {
                    key: 'name',
                    title: '姓名',
                    align: 'center',
                    width: 100,
                },

                {
                    key: 'total',
                    title: '总分',
                    align: 'center',
                    width: 80,
                },
                {
                    key: 'arrange',
                    title: '平均分',
                    align: 'center',
                    width: 80,
                },
                {
                    key: 'level',
                    title: '名次',
                    align: 'center',
                    width: 80,
                },
                {
                    key: 'fail',
                    title: '不及格',
                    align: 'center',
                    width: 80,
                }

            ], //这里的核心课程列是由后台数据生成的
            columns2: [{
                    key: 'nameBottom',
                    align: 'center',
                    width: 180,
                    className: 'bold'
                },

                {
                    key: 'total',
                    width: 80,
                },
                {
                    key: 'arrange',
                    width: 80,
                },
                {
                    key: 'level',
                    width: 80,
                },
                {
                    key: 'fail',
                    width: 80,
                },
            ], //这里的核心课程列是由后台数据生成的
        }
    },
    methods: {
        init() {
            this.getDataList();
            this.createColumns(this.getDataColumn()); //初始化第一个表格表头
            this.createColumns2(this.getDataColumn()); //初始化第二个表格表头
        },
        //render函数
        renderCell: function (h, v) {
            if (v < 60) {
                return h(
                    'div', {
                        class: 'lt60Em'
                    },
                    v
                )
            } else {
                return h(
                    'div', {},
                    v
                )
            }
        },
        //动态生成表格一列标题
        createColumns(dataArr) {
            let that = this;
            //使用后台生成核心column 
            function createColumn(dataArr) {
                console.log(dataArr.length);
                let arr = [];
                for (let i = 0; i < dataArr.length; i++) {
                    let obj = {
                        key: 'course' + (i + 1),
                        title: '',
                        align: 'center',
                        children: [{
                                key: 'score' + (i + 1),
                                title: '成绩',
                                align: 'center',
                                width: 80,
                                render: (h, params) => {
                                    return that.renderCell(h, params.row[params.column.key])
                                }
                            },
                            {
                                key: 'replenish' + (i + 1),
                                title: '补考',
                                align: 'center',
                                width: 80,
                            },
                        ]
                    };
                    obj["title"] = dataArr[i].title;
                    arr.push(obj);
                }
                return arr;
            }
            this.columns.splice(2, 0, ...createColumn(dataArr));
            // console.log(this.columns);
        },
        //动态生成表格二列标题
        createColumns2(dataArr) {
            let that = this;
            //使用后台生成核心column 
            function createColumn2(dataArr) {
                console.log(dataArr.length);
                let arr = [];
                for (let i = 0; i < dataArr.length; i++) {
                    let obj = {
                        title: '',
                        key: 'course' + (i + 1) + 'Bottom',
                        align: 'center',
                        width: 80,
                    };
                    let obj2 = {
                        width: 80,
                    };
                    obj["title"] = dataArr[i].title;
                    arr.push(obj, obj2);
                }
                return arr;
            }
            this.columns2.splice(1, 0, ...createColumn2(dataArr));
            // console.log("this.columns2",this.columns2);
        },
        /* 后台发来表头数据 */
        getDataColumn() {
            return [{
                    title: '哲学与人生',
                },
                {
                    title: '语文',
                },
                {
                    title: '英语'
                },
                {
                    title: '体育',
                },
                {
                    title: '商务英语函电',
                },
                {
                    title: '商务英语听说',
                },
                {
                    title: '国际贸易实务',
                },
                {
                    title: '外贸单证实务',
                }
            ];
        },

        // 后台发来的分数数据        
        getDataList() {
            this.data = [{
                    name: '张三1',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '97',
                    total: '768',
                    arrange: '96',
                    level: '1',
                    fail: '',
                },
                {
                    name: '张三2',
                    score1: '50',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '59',
                    replenish5: '60',
                    score6: '60',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
                {
                    name: '张三2',
                    score1: '100',
                    score2: '97',
                    score3: '97',
                    score4: '97',
                    score5: '97',
                    score6: '97',
                    score7: '97',
                    score8: '50',
                    replenish8: '60',
                    total: '768',
                    arrange: '96',
                    level: '2',
                    fail: '1',
                },
            ];
            this.data2 = [{
                    nameBottom: '总分',
                    course1Bottom: '3635',
                    course2Bottom: '3342',
                    course3Bottom: '2660',
                    course4Bottom: '3300',
                    course5Bottom: '3300',
                    course6Bottom: '3300',
                    course7Bottom: '3300',
                    course8Bottom: '3300',
                    total: '',
                    arrange: '',
                    level: '',
                    fail: '',

                },
                {
                    nameBottom: '平均分',
                    course1Bottom: '80.78',
                    course2Bottom: '80.78',
                    course3Bottom: '80.78',
                    course4Bottom: '80.78',
                    course5Bottom: '80.78',
                    course6Bottom: '80.78',
                    course7Bottom: '80.78',
                    course8Bottom: '80.78',
                    total: '',
                    arrange: '',
                    level: '',
                    fail: '',
                },
                {
                    nameBottom: '最高分',
                    course1Bottom: '100',
                    course2Bottom: '80.78',
                    course3Bottom: '80.78',
                    course4Bottom: '80.78',
                    course5Bottom: '80.78',
                    course6Bottom: '80.78',
                    course7Bottom: '80.78',
                    course8Bottom: '80.78',
                    total: '',
                    arrange: '',
                    level: '',
                    fail: '',
                },
                {
                    nameBottom: '最低分',
                    course1Bottom: '100',
                    course2Bottom: '80.78',
                    course3Bottom: '80.78',
                    course4Bottom: '80.78',
                    course5Bottom: '80.78',
                    course6Bottom: '80.78',
                    course7Bottom: '80.78',
                    course8Bottom: '80.78',
                    total: '',
                    arrange: '',
                    level: '',
                    fail: '',
                },
                {
                    nameBottom: '及格率',
                    course1Bottom: '100',
                    course2Bottom: '80.78',
                    course3Bottom: '80.78',
                    course4Bottom: '80.78',
                    course5Bottom: '80.78',
                    course6Bottom: '80.78',
                    course7Bottom: '80.78',
                    course8Bottom: '80.78',
                    total: '',
                    arrange: '',
                    level: '',
                    fail: '',
                },
                {
                    nameBottom: '优秀率',
                    course1Bottom: '100',
                    course2Bottom: '80.78',
                    course3Bottom: '80.78',
                    course4Bottom: '80.78',
                    course5Bottom: '80.78',
                    course6Bottom: '80.78',
                    course7Bottom: '80.78',
                    course8Bottom: '80.78',
                    total: '',
                    arrange: '',
                    level: '',
                    fail: '',
                },
            ];
        }
    },
    computed: {
        //通过课程的数量以及前后序号、姓名等字段来计算表格外div的宽度，用于进行横向滚动
        styles: function () {
            let widthSingleCell = 80; //单列的宽度，如序号 姓名等
            let widthDoubleCell = widthSingleCell * 2; //双列的宽度，（成绩+补考）
            let numTotal = this.columns.length; //总列数
            let numSingle = 6; //单列数量
            let numDouble = numTotal - numSingle; //单列数量
            /**
             * 双列数量*双列宽度+单列数量*单列宽度+20(姓名列多了20)+1
             */
            let width = numDouble * widthDoubleCell + numSingle * widthSingleCell + 20 + 1;
            return 'width:' + width + 'px';
        }
    },

    mounted() {
        this.init();
    },
}
</script>

<style lang="less">
.lt60Em {
    color: #f00;
}

.bold {
    font-weight: bold;
}
</style><style lang="less">
.twoTable {
    overflow-x: scroll; //把两个表格放到一个div里进行滚动

    .scrollChild {
        .ivu-table-overflowX {
            overflow-x: hidden; //去掉iviewtable的滚动条
        }

        .hideHeader {
            thead {
                display: none; //隐藏第二个表格的表头
            }
        }
    }

}
</style>
